<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <el-row :gutter="20">
        <el-col :span="12" :offset="2">
          <div>
            <el-alert title="题目" type="success" center class="ques" :closable="false"></el-alert>

            <!-- +1 -->
            <!-- questions从后端获取的题目集，itemnum当前的题目号,question有两个属性，一个为content，一个是id -->
            <!-- {{questions[itemnum].details}} -->
            <div class="areaq">{{questions}}</div>

            <el-alert title="用户回答" type="error" effect="dark" center :closable="false" class="ans"></el-alert>

            <!-- 改v-model +1 -->
            <el-input
              type="textarea"
              :autosize="{ minRows: 7, maxRows: 7}"
              placeholder="答题区域" 
              class="areaforuser"
              v-model="answer"
            ></el-input>


            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <el-button type="primary" @click="up" icon="el-icon-arrow-left" size="mini">上一题</el-button>
              </el-col>
              <el-col :span="5" :push="1">
                <el-button type="danger" @click="submit" size="mini">提交回答</el-button>
              </el-col>
              <el-col :span="5" :push="2">
                <el-button type="primary" @click="down" size="mini">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6" :offset="2">
          <div class="result">
            <el-alert title="得分" type="success" effect="dark" center :closable="false"></el-alert>

            <!-- +1 -->
            <div class="areas">
              <span>{{score}}</span>
              分
            </div>

            <el-alert title="标准答案" type="success" effect="dark" center :closable="false"></el-alert>

            <!-- +1 -->
            <div class="areaa">{{standard_ans}}</div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer>©2020 ZJSU RSM 版权所有</el-footer>
  </el-container>
</template>

<script>
import qs from 'qs'
export default {
  data() {
    // +1
    return {
      // +1
      questions: '',
      itemnum: 1,
      answer: '',
      score: 0,
      standard_ans: ''
    }
  },
  created() {
    this.getQuestion()
  },
  methods: {
    // 待完善
    async getQuestion() {
      const { data: res } = await this.$http.get(
        'user/question/getQuestion/' + this.itemnum
      )
      if (res.code !== 200) return this.$message.error(res.message)
      this.questions = res.data.details
      console.log(res)
    },

    // +1
    async submit() {
      if (this.answer == null) {
        return this.$message.info('您还没有填入答案')
      } else {
        const { data: res } = await this.$http.post(
          `user/answer/submit?reply=${this.answer}&questionId=${this.itemnum}`
        )
        if (res.code !== 200) return this.$message.error(res.message)
        console.log(res)
        this.score = res.data.score
        this.standard_ans = res.data.formatAnswer
      }
    },

    clear() {
      this.answer='';
      this.score=0;
      this.standard_ans='';
    },

    up() {
      if (this.itemnum !== 1) {
        this.itemnum--;
        this.getQuestion();
        this.clear();
      }
    },

    down() {
      this.itemnum++;
      this.getQuestion();
      this.clear();
    }
  }
}
</script>

<style lang="less" scoped>
.el-header {
  height: 292px !important;
  background: url('../assets/bg.jpg');
  background-size: 100% 292px;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.ques {
  background: #2946e0 !important;
  color: #fff !important;
  // text-align: center;
}
.el-alert__title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 18px;
}
.result > .el-alert {
  background: #2c9d2b !important;
  color: #fff !important;
}
.areaq {
  background: #e8ebfe;
  height: 80px;
  margin-bottom: 20px;
  padding-top: 10px;
  padding-left: 20px;
}
.areas {
  background: #e8f4e8;
  height: 100px;
  font-size: 24px;
  text-align: center;
  > span {
    font-size: 56px;
    font-weight: 700;
    color: #2c9d2b;
  }
}
.areaa {
  background: #e8f4e8;
  height: 157px;
  padding-top: 10px;
  padding-left: 20px;
}
.ans {
  background: #dd2c2a !important;
}
.areaforuser {
  border: #dd2c2a !important;
  margin-bottom: 15px;
}
.el-footer {
  height: 40px !important;
  text-align: center;
  background: #494544;
  color: #d7d7d7;
  line-height: 40px;
}
</style>